<template>
  <layout>
    <uv-sticky
        bgColor="#fff"
        customNavHeight="0"
    >
      <uv-navbar
          :fixed="false"
          title="售后订单"
          @leftClick="goBack"
      />
      <uv-tabs
          :scrollable="false"
          :list="navList"
          @click="click"
          lineColor="#f56c6c"
      ></uv-tabs>
    </uv-sticky>
    <view
        class="orderList"
        v-if="!listEmpty"
    >
      <refund-order
          :data="item"
          v-for="(item) in dataList"
          :key="`${type}_${item.id}`"
          @refresh="refresh"
      />
    </view>
    <Empty
        v-else
        :iconSrc="emptyOrderIcon"
    ></Empty>
    <!-- 加载中 -->
    <ListLoadLoading v-if="loading" />
    <!-- 加载完毕-->
    <ListLoadOver v-if="loadend" />
  </layout>

  <ReturnTop :scroll-top="scrollTop" />

</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { storeAfterSalesList } from '@/api/order'
import { useRouter } from "@/hooks/useRouter";
import { emptyOrderIcon } from "@/utils/images";
import Empty from "@/components/Empty/index.vue"
import { usePage } from "@/hooks";
import ReturnTop from "@/components/ReturnTop/index.vue";
import ListLoadOver from "@/components/ListLoadOver/index.vue"
import ListLoadLoading from "@/components/ListLoadLoading/index.vue"
import { useScroll } from "@/hooks/useScroll";

const {scrollTop} = useScroll()

const {type, refresh, dataList, loadend, loading, listEmpty} = usePage(storeAfterSalesList)

const {goBack, getUrlParams} = useRouter();


const navList = ref([
  {name: "全部", value: -1,},
  {name: "售后中", value: 1,},
  {name: "已完成", value: 2,},
])


const click = (data) => {
  type.value = data.value
  refresh()
}

onShow(() => {
  const params = getUrlParams()
  if (params.type < 0 || !params.type) {
    type.value = -1
  } else {
    type.value = params.type
  }
  refresh()
})


</script>

<style lang="scss">
.orderList {
  padding: 20rpx 0;
}
</style>
